<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <text class="nav-title">专业洗车</text>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <input 
        class="search-input" 
        placeholder="搜索店铺名称"
        placeholder-class="placeholder-style"
        v-model="searchQuery"
      />
    </view>

    <!-- 店铺列表 -->
    <view class="shop-list">
      <view 
        class="shop-item" 
        v-for="item in filteredShops" 
        :key="item.id"
        @click="navigateToDetail(item.id)"
      >
        <view class="shop-content">
			
         <image 
           :src="item.avatar" 
           class="shop-avatar"
           mode="aspectFill"
         />
          <view class="shop-info">
            <view class="title-line">
              <text class="shop-name">{{ item.name }}</text>
              <view class="star-rating">
                <text class="star">★</text>
                <text class="score">{{ item.rating.toFixed(1) }}分</text>
              </view>
            </view>
            <view class="meta-line">
              <text class="distance">距离{{ item.distance }}km</text>
              <text class="sales">已售{{ item.sales }}</text>
            </view>
            <view class="time-line">
              <text class="hours">营业时间：{{ item.hours }}</text>
            </view>
            <view class="address-line">
              <text class="address">{{ item.address }}</text>
            </view>
          </view>
		  
		  
        </view>
      </view>

      <!-- 状态提示 -->
      <view v-if="loading" class="loading-text">加载中...</view>
      <view v-if="!loading && filteredShops.length === 0" class="empty-text">
        暂无店铺信息
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const searchQuery = ref('');
const shopList = ref([]);
const loading = ref(true);
const geol = ref({});

// 计算两点之间的距离（Haversine 公式）
const getDistance = (lat1, lon1, lat2, lon2) => {
  const toRad = (angle) => (angle * Math.PI) / 180;
  const R = 6371; // 地球半径（单位：公里）

  const dLat = toRad(lat2 - lat1);
  const dLon = toRad(lon2 - lon1);
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return (R * c).toFixed(2); // 返回公里数
};

// 模拟数据请求
onLoad(() => {
  loading.value = true;
  geol.value = getApp().globalData.geo;

  uni.request({
    url: 'http://localhost:10001/store/ratings',
    method: 'GET',
    success(res) {
      if (res.statusCode === 200) {
		  console.log(res.data),
        shopList.value = res.data.map((item) => ({
          id: item.storeId,
          name: item.storeName,
          rating: item.averageRating || 0,
          hours: item.businessHours,
          sales: item.orderCount,
          latitude: item.latitude,
          longitude: item.longitude,
          distance: getDistance(
            geol.value.latitude, 
            geol.value.longitude, 
            item.latitude, 
            item.longitude
          ), // 计算距离
          avatar: item.storeImage, // 这里可以换成真实图片
        }));
      } else {
        console.log("请求失败：" + res);
      }
    },
    fail: (err) => {
      console.error("请求错误：" + err);
    },
    complete: () => {
      loading.value = false;
    }
  });
});
// 计算属性
// 计算过滤后的店铺
const filteredShops = computed(() => {
  const query = searchQuery.value.trim().toLowerCase();
  return query
    ? shopList.value.filter(shop => shop.name.toLowerCase().includes(query))
    : shopList.value;
});

// 跳转详情页
const navigateToDetail = (id) => {
	console.log('传递的ID:', id); // 添加调试语句
  uni.navigateTo({
    url: `/pages/zhuanyexiche/WashCarInfo/WashCarInfo?id=${id}`
  });
};
</script>

<style>
/* 基础容器 */
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

/* 导航栏样式 */
.nav-bar {
  height: 88rpx;
  background-color: #ffffff;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #eeeeee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333333;
}

/* 搜索框样式 */
.search-box {
  padding: 20rpx 32rpx;
  background: #ffffff;
}

.search-input {
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 36rpx;
  padding: 0 32rpx;
  font-size: 28rpx;
}

.placeholder-style {
  color: #999999;
}

/* 店铺列表 */
.shop-list {
  padding: 0 24rpx;
}

.shop-item {
  background: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.shop-content {
  padding: 24rpx;
  display: flex;
}

.shop-avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 8rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
}

/* 店铺信息 */
.shop-info {
  flex: 1;
  min-width: 0;
}

.title-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.shop-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-rating {
  display: flex;
  align-items: center;
}

.star {
  color: #ffd700;
  font-size: 28rpx;
  margin-right: 8rpx;
}

.score {
  font-size: 26rpx;
  color: #666666;
}

/* 元信息 */
.meta-line {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.distance {
  font-size: 24rpx;
  color: #666666;
  margin-right: 30rpx;
}

.sales {
  font-size: 24rpx;
  color: #666666;
}

/* 时间信息 */
.time-line {
  margin-bottom: 8rpx;
}

.hours {
  font-size: 24rpx;
  color: #888888;
}

/* 地址信息 */
.address-line {
  margin-top: 8rpx;
}

.address {
  font-size: 24rpx;
  color: #999999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 状态提示 */
.loading-text,
.empty-text {
  text-align: center;
  font-size: 28rpx;
  color: #999999;
  padding: 40rpx 0;
}
</style>